import React, { Component } from 'react'
import ManufacturerInfo from "../../../types/ManufacturerInfo";
import { Button, Card, Form, Input, message, Spin, Cascader } from "antd";
import { Store, ValidateErrorEntity } from 'rc-field-form/lib/interface'
import { addManufacturer } from "../../../requests/Manufacturer";
import { FormInstance } from "antd/lib/form";
import { getRes } from "../../../configFile";
import { district } from '../../../static/district/distrcit2'

interface IProps { }
interface IState {
  manufacturerInfo: ManufacturerInfo
  isLoading: boolean
  districtSource: Array<object>
}
export default class AddManufacturerComponent extends Component<IProps, IState> {
  formRef = React.createRef<FormInstance>()
  constructor(props: IProps) {
    super(props)
    this.state = {
      districtSource: district,
      isLoading: true,
      manufacturerInfo: {
        manufacturerID: -1,
        manufacturerName: '',
        manufacturerAddress: '',//地址 前面是标准地址代码，后面是自定义字符
        manufacturerTelephone: '',
        manufacturerIntroduction: ''
      }
    }
  }

  layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
  };
  tailLayout = {
    wrapperCol: { offset: 4 },
  };

  async componentDidMount() {
    this.setState({
      ...this.state,
      isLoading: false
    })
  }


  //输入合法函数
  onFinish: (values: Store) => void = async values => {
    try {
      this.setState({ isLoading: true })
      const address = values.area[values.area.length - 1] + ',' + values.specificAddr
      const res = getRes(await addManufacturer(values.manufacturerName, values.manufacturerTelephone, address, values.manufacturerIntroduction))
      if (res.isSuccessful) {
        message.success("添加成功")
        this.formRef.current?.resetFields();
      } else {
        message.error("添加失败" + res.message)
      }
      this.setState({ isLoading: false })

    } catch (err) {
      message.error(err.toString())
    }
  }

  onFinishFailed = (errorInfo: ValidateErrorEntity) => {
    message.error(errorInfo.errorFields[0].errors[0]);
  };


  render() {
    return (
      <div>
        <Spin size='large' spinning={this.state.isLoading}>
          <Card
            title={<span style={{ fontWeight: 'bold' }}>添加厂商</span>}
            bordered={true}>
            <Form
              onFinishFailed={this.onFinishFailed}
              onFinish={this.onFinish}
              ref={this.formRef}
              {...this.layout}
              name="addManufacturer"
            >
              <Form.Item
                label="厂商名"
                name="manufacturerName"
                rules={[{ required: true }]}
              >
                <Input style={{ width: '100%' }} />
              </Form.Item>

              <Form.Item
                label="厂商电话"
                name="manufacturerTelephone"
                rules={[{ required: true, message: '厂商电话不能为空' },
                    ({ getFieldValue }) => ({
                        validator(rule, value) {
                            var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
                            if (!value || phoneReg.test(value)) {
                                return Promise.resolve();
                            }
                            return Promise.reject('请输入正确电话号码');
                        },
                    }),
                ]}
              >
                <Input style={{ width: '100%' }} />
              </Form.Item>

              <Form.Item
                label="厂商地区"
                name="area"
                rules={[{ required: true, message: '标准地区' }]}
              >
                <Cascader
                  placeholder="请选择地区"
                  options={this.state.districtSource}
                  expandTrigger="hover"
                  style={{ width: '100%' }}
                />
              </Form.Item>

              <Form.Item
                label="详细地址"
                name="specificAddr"
                rules={[{ required: true, message: '详细地址' }]}
              >
                <Input placeholder="详细地址" style={{ width: '100%' }} />
              </Form.Item>
              <Form.Item
                label="厂商简介"
                name="manufacturerIntroduction"
                rules={[{ required: true }]}
              >
                <Input style={{ width: '100%' }} />
              </Form.Item>

              <Form.Item {...this.tailLayout}>
                <Button type="primary" htmlType="submit" size="large">
                  确认添加
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </Spin>
      </div>
    )
  }
}
